import React, { useEffect, useState } from "react"
import { View, Image, Swiper, SwiperItem } from "@tarojs/components"
import NavLayout from "@@/components/layout/nav.layout"
import "./fancy.scss"
import service from "@@/services/data.service"
import userService from "@@/services/user.service"
import { activityIntro, activityIntroDetail } from "@@/interfaces/api.interface"
import proxy from "../../../config/proxy"
import { useDidShow, pageScrollTo } from "@tarojs/taro"


const FancyPage = () => {
  const [showModal, setShowModal] = useState(false);
  const [currentIndex, setcurrentIndex] = useState(0);
  const [imgList, setImgList] = useState<activityIntro[]>([])
  useDidShow(() => {
    pageScrollTo({
      selector: "#FancyPage",
      scrollTop: -100,
    })
  })

  useEffect(() => {
    // console.log("useEffect-noData")
    init();
    return setShowModal(false)
  }, [])
  const init = async () => {
    let exhibitionId;
    const res = await userService.getExhibitionId()
    if (res.code === 200) {
      exhibitionId = res.data
    }
    // 精彩瞬间列表
    service.getImg({ exhibitionId, pageSize: 100 }).then(rslt => {
      setImgList(rslt.data.entities)
    })
  }
  // 点击打开预览图片
  const preview = (index: number) => () => {
    // let cur = index + 1
    // setShowModal(!showModal)
    // cur && setcurrentIndex(cur)

    setShowModal(!showModal)
    setcurrentIndex(index)
  }
  // 切换swiper
  const changeSwiper = (e) => {
    // if (e.detail.source == "touch") {
    //   setcurrentIndex(e.detail.current)
    // }
    setcurrentIndex(e.detail.current)
  }
  return <NavLayout border leftIconType="chevron-left" title="精彩瞬间" color="#141414" id="FancyPage">
    {/* 新闻资讯  */}
    <View className="partBox">
      <View className="newsList">
        {
          imgList.map((item, index) => {
            return <View className='newsItem' key={item.id}>
              <View className="newsImg" onClick={preview(index)}>
                <Image src={`${proxy.sourceUrl}/${item.image}`} ></Image>
              </View>
              <View className="title">{item.title}</View>
            </View>
          })
        }
      </View>
    </View>
    <View className={`modal ${showModal ? '' : 'hide'}`}>
      <View className="overlay" onClick={() => {
        setShowModal(false)
      }}></View>
      <View className="content">
        {
          imgList.length && <Swiper className='swiper' circular current={currentIndex} onChange={changeSwiper} >
            {
              imgList.map(item => {
                return <SwiperItem style='display:flex;' key={item.id} >
                  <View className='swiperImgView'>
                    <Image src={`${proxy.sourceUrl}/${item.image}`}></Image>
                  </View>
                </SwiperItem>
              })
            }
          </Swiper>
        }

      </View>
      <View className="swiperIndex">{currentIndex + 1}/{imgList.length}</View>
    </View>
  </NavLayout>
}
export default FancyPage
